
<template>
    <div>
        <van-nav-bar
            title="策略列表"
            right-text="新建"
            @click-right="create_dialog_show"
            />
        <div style="margin-bottom:55px">
            <div v-for="(item, index) in backtest_list" :key="index" style="margin:5px">
                <van-swipe-cell>
                <van-cell>
                    <van-row justify="space-around" align="center" style="background:white;border-radius:10px">
                        <van-col span="2">
                            <p style="margin-left:2px"> {{ item.id }} </p>
                        </van-col>
                        <van-col span="12">
                            <p> {{ item.strategy_name }} </p>
                        </van-col>
                        <van-col span="10">
                            <van-button plain type="primary" @click="get_backtest_record_list(item.id)">列表</van-button>
                            <van-button plain type="primary" @click="get_one_backtest(item.id)">详情</van-button>
                        </van-col>
                    </van-row>
                </van-cell>
                <template #right>
                    <van-button square type="danger"  @click="kill_backtest(item)" text="停止" />
                    <van-button square type="danger" @click="delete_backtest(item)" text="删除" />
                </template>
            </van-swipe-cell>
            </div>
        </div>
        <van-popup v-model:show="record_popup_show" position="left" :style="{ height: '100%',width:'70%' }" >
            <div style="background:#f8f8f8">
                <div v-for="(item, index) in backtest_record_list" :key="index" style="margin-top:3px;background:white;border-radius:10px">
                    <van-row justify="space-around" align="center" is-link  @click="showOne_record_detail(item)">
                        <van-col span="18"><p style="margin-left:3px"> {{ item.stock_info }} </p></van-col>
                        <van-col span="3"><p style="margin-left:3px"> {{ item.value1 }} </p></van-col>
                        <van-col span="3"><p style="margin-left:3px"> {{ item.value2 }} </p></van-col>
                    </van-row>
                </div>
            </div>
        </van-popup>
        <van-popup v-model:show="record_detail_pop" :style="{ height: '60%',width:'70%' }">
            <van-field label="mark:" readonly />
            <van-field v-model="one_record_detail.mark" rows="20" type="textarea" maxlength="1000"/>
        </van-popup>
        <van-popup v-model:show="backtest_detail_popup_show" position="left" :style="{ height: '100%',width:'70%' }" >
            <van-cell-group>
                <van-cell title="id:" :value="one_backtest.id" />
                <van-cell title="strategy_name:" :value="one_backtest.strategy_name"/>
                <van-cell title="value1:" :value="one_backtest.value1"/>
                <van-cell title="value2:" :value="one_backtest.value2"/>
                <van-cell title="value3:" :value="one_backtest.value3"/>
                <van-cell title="进度:" :value="one_backtest.percent"/>
                <van-cell title="状态:" :value="one_backtest.status"/>
                <van-cell title="mark:" :value="one_backtest.mark"/>
                <van-cell title="params:"/>
                <van-cell :value="one_backtest.params"/>
            </van-cell-group>
        </van-popup>
        <van-popup v-model:show="create_dialog" :style="{ height: '60%',width:'70%' }">
            <van-form  @submit="create_income_time_backtest">
                <van-cell-group inset>
                    <van-field  v-model="newBacktest.strategy_name"
                                is-link
                                readonly
                                name="picker"
                                label="策略名称:"
                                placeholder="点击选择策略"
                                @click="showStrategyPicker = true"/>
                    <van-field  v-model="newBacktest.from_date"
                                is-link
                                readonly
                                name="from_date"
                                label="开始日期"
                                placeholder="点击选择日期"
                                @click="cal_picker_show = true"
                                />
                    <van-field v-model="newBacktest.low_price"  name="low_price" label="最低价:"/>
                    <van-field v-model="newBacktest.high_price"  name="high_price" label="最高价:"/>
                    <van-field v-model="newBacktest.days"  name="days" label="统计天数:"/>
                    <van-field v-model="newBacktest.percent"  name="percent" label="收益率:"/>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </van-popup>
        <van-popup v-model:show="showStrategyPicker" position="bottom">
            <van-picker :columns="strategyColumns" @confirm="onStrategyPickerConfirm" @cancel="showStrategyPicker = false"/>
        </van-popup>
        <van-calendar v-model:show="cal_picker_show" @confirm="onCalPickerConfirm" :min-date="minDate" :max-date="maxDate" />
        <van-tabbar route>
            <van-tabbar-item replace to="/strategy" icon="home-o">策略</van-tabbar-item>
            <van-tabbar-item replace to="/stock" icon="search">股票</van-tabbar-item>
            <van-tabbar-item replace to="/backtest" icon="friends-o">回测</van-tabbar-item>
            <van-tabbar-item replace to="/setting" icon="setting-o">管理</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import {
        getBacktestList,
        createIncomeTimeBacktest,
        killBacktest,
        getBacktestRecordList,
        getOneBacktest,
        deleteBacktest,
        getStrategy,
    } from '@/api';
import { Dialog } from 'vant';
import { Notify } from 'vant';
import utils from '../common/utils'
export default {
  data() {
    return {
      goods: {},
      cal_picker_show: false,
      minDate: new Date(2021, 0, 1),
      maxDate: new Date(),
      backtest_list: [],
      one_backtest: {},
      backtest_record_list:[],
      record_popup_show: false,
      createBacktestPopupShow: false,
      newBacktest:{},
      create_dialog: false,
      backtest_detail_popup_show: false,
      showStrategyPicker: false,
      strategyColumns: [],
      record_detail_pop: false,
      one_record_detail: {}
    };
  },

  methods: {
    formatPrice() {
      return '¥' + (this.goods.price / 100).toFixed(2);
    },
    showOne_record_detail(item) {
      this.one_record_detail = item;
      this.record_detail_pop = true;
    },
    onStrategyPickerConfirm(value) {
      this.newBacktest.strategy_name = value;
      this.showStrategyPicker = false;
    },
    onCalPickerConfirm(value){
        this.newBacktest.from_date = utils.dateFormat("YYmmdd", value);
        this.cal_picker_show = false
    },
    get_backtest_list() {
        let _this = this
        let params = {}
        getBacktestList(params).then(res => {
            _this.backtest_list = res.dataset
        });
    },
    create_dialog_show() {
        this.create_dialog = true
    },
    create_income_time_backtest() {
        let _this = this
        let params = _this.newBacktest
        
        createIncomeTimeBacktest(params).then(res => {
            if(res.status === 1){
                Notify({ type: 'success', message: '创建成功' });
                _this.create_dialog = false
                _this.$router.push('/backtest');
            } else {
                Notify({ type: 'danger', message: res.msg });
            }
        });
    },

    kill_backtest(item) {
        let _this = this
        Dialog.confirm({
            title: '标题',
            message: '是否要停止:' + item.strategy_name,
        })
        .then(() => {
           killBacktest(item.id).then(res => {
            // console.info(res.dataset)
            if(res.status === 1){
                Notify({ type: 'success', message: '成功停止' });
                _this.get_backtest_list()
            } else {
                Notify({ type: 'danger', message: res.msg });
            }
        });
        })
        .catch(() => {
            // on cancel
        });
    },
    get_backtest_record_list(id) {
        let _this = this
        getBacktestRecordList(id).then(res => {
            // console.info(res.dataset)
            _this.backtest_record_list = res.dataset
            _this.record_popup_show = true
        });
    },
    get_one_backtest(id) {
        let _this = this
        getOneBacktest(id).then(res => {
            console.info(res.dataset)
            _this.one_backtest = res.dataset
            _this.backtest_detail_popup_show = true
        });
    },
    get_strategy_list() {
        let _this = this
        let params = {}
        getStrategy(params).then(res => {
            console.log(res)
            if(res.status === 1){
                res.dataset.forEach(element => {
                    if(element.available === 1){
                        _this.strategyColumns.push(element.name)
                    }
                });
            }
        });
    },
    delete_backtest(item) {
        let _this = this
         Dialog.confirm({
            title: '标题',
            message: '是否要删除:' + item.strategy_name,
        })
        .then(() => {
           deleteBacktest(item.id).then(res => {
            // console.info(res.dataset)
            if(res.status === 1){
                Notify({ type: 'success', message: '成功删除' });
                _this.get_backtest_list()
            } else {
                Notify({ type: 'danger', message: res.msg });
            }
            
        });
        })
        .catch(() => {
            // on cancel
        });
    },
  },
   mounted:function(){
       this.get_backtest_list()
       this.get_strategy_list()
    }
};
</script>